<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>

    <dialog id="myDialog" class="myDialog">
        <div class="my_dialog" id="my_dialog">
            <h3>请记住你的账号和密码</h3>
            <div class="row">
                <span>账号：</span>
                <input type="text" id="ID">
            </div>

            <div class="row">
                <span>密码：</span>
                <input type="text" id="password" >
            </div>

            <div class="row1">
                <button onclick="hideDialog()">确认</button>
            </div>
        </div>
    </dialog>


    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/log.jpg" alt="">
        <span class="title">我的博客系统</span>2
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的注册框 -->
        <div class="login-dialog">
            <h3>用户注册</h3>
            <div class="row">
                <span>用户号</span>
                <input type="text" id="username" onblur="user()">
            </div>
            <div id="warn1" class="warn"></div>
<!--            <div class="row2">-->
<!--            <span>性别：</span>-->
<!--            <input type="radio" id="option1" name="sex" value="1">-->
<!--                <label for="option1">男</label>-->
<!--            <input type="radio" id="option2" name="sex" value="1">-->
<!--                <label for="option2">女</label>-->
<!--            </div>-->
            <div class="row">
                <span>密码</span>
                <input type="password" id="password1" onblur="password1()">
            </div>
            <div id="warn2" class="warn"></div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="password2" onblur="password2()">
            </div>
            
            <div id="warn3" class="warn"></div>
            <div class="row">
                <button id="submit" onclick=re()>提交</button>
            </div>
            <div class="warn" id="success"></div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var flag1=false
    var flag2=false
    var flag3=false
    function cid(id){
        return document.getElementById(id)
    }
    //检查账号是否为空
    function user(){
        if(cid("username").value==null || cid("username").value==""){
            cid("warn1").innerText="*用户号不能为空"
            return
        }         
        if(1){
            cid("warn1").innerText=""
            flag1=true
        }
    }
    //检查密码
    function password1(){
        if(cid("password1").value==null||cid("password1").value==""){

            cid("warn2").innerText="*密码不能为空！"
			return
		}
		if(cid("password1").value.length<5||cid("password1").value.length>25){

            cid("warn2").innerText="*密码长度为5-25！"
			return
		}
		if(1){
            cid("warn2").innerText=""
			flag2=true
		}
    }
       //检查密码
    function password2(){
        if(cid("password2").value==null||cid("password2").value==""){

            cid("warn3").innerText="*密码不能为空！"
			return
		}
		if(cid("password1").value!=cid("password2").value){

            cid("warn3").innerText="*两次密码要相同！"
			return
		}
		if(1){
            cid("warn3").innerText=""
			flag3=true
		}
    }
    function hideDialog() {
        var dialog = document.getElementById('myDialog');
        dialog.close();
        location.href="./login.html";
    }
    function re(){
        if(flag1 && flag2 && flag3){
                var username=jQuery("#username").val().trim();
                var password=jQuery("#password1").val().trim();
            $.post("/userinfo/reg",{
                "uname":username,
                "password":password,
            },function(res){
                if(res.code!=200){
                    cid("success").innerText="注册失败！！！";
                }else{
                    cid("success").innerText="注册成功！！！";
                    var createHtml="";
                    createHtml+='<h3>请记住你的账号和密码</h3>';

                    createHtml+='<div class="row">' +
                        '<span>账号：</span>' +
                        '<input type="text" id="ID" value= " '+res.data.uid+' "readonly>' +
                        '</div>' +

                        ' <div class="row">' +
                             '<span>密码：</span>' +
                             '<input type="text" id="password" value=" '+ res.data.password+' " readonly>' +
                        '</div>' +
                        '            <div class="row1">' +
                        '                <button onclick="hideDialog()">确认</button>' +
                        '            </div>'
                    ;
                        jQuery("#my_dialog").html(createHtml);
                    var dialog = document.getElementById('myDialog');
                    dialog.show();
                }
            });
        }
    }
</script>



</html>